<!-- 音乐分享的实现  API提供网站 
     实现原理：我的做法是通过点点网，直接在点点里面进行了数据地址的抓取，如下：
       http://kuang.xiami.com/app/nineteen/search/key/{歌曲名}/diandian/1/page/{页码}?callback=__searchJsonpHandler__
                       但是这样的做法并不好，因为如果请求址换了呢
                      单独歌曲信息(如封面、所属专辑等等信息)的请求：http://www.xiami.com/widget/xml-single/uid/0/sid/{song_id}
                     播放器地址： <embed src="http://www.xiami.com/widget/0_{song_id}/singlePlayer.swf"     type="application/x-shockwave-flash" width="257" height="33" wmode="transparent"></embed>
 -->
<%@ page language="java" pageEncoding="utf-8"%>
<script type="text/javascript" 	src="${ ctx}/scripts/music.js"></script>
<link href="${ ctx}/skins/music.css" rel="stylesheet"  type="text/css" />

<script type="text/javascript">
    var musicPage = 1;
	$(".music_list li").live('click',function() {
			var PL = '<h3>曲名：'
					+ $(this).attr("name")
					+ '</h3><embed src="http://www.xiami.com/widget/0_'
					+ $(this).attr("id")
					+ '/singlePlayer.swf" type="application/x-shockwave-flash" width="257" height="33" wmode="transparent"></embed>';
			$("#WER").append(PL);
			
			$.post("${ctx}/blog/blog.action", { "title": $(this).attr("name"),"htmlCode":'<embed src="http://www.xiami.com/widget/0_' + $(this).attr("id")
				                                                            + '/singlePlayer.swf" type="application/x-shockwave-flash" width="257" height="33" wmode="transparent"></embed>',
				                                "method:saveMusic":"xxxx","description":"音乐信息的存储" },
		            function(data){
                           	eval("var json=" + data);
               				var single = "{'musicId':"+json.musicId+"}";
               		    	var source = $("#data-music-hidden").attr("data-music-hidden");  
               		    	$("#data-music-hidden").attr("data-music-hidden",source + single +",");  
		        });
	        
	});

	//使用JSONP进行跨越数据的请求,其根本原因在于可以将数据加载进js脚本中
	function searchMusicList(Page){
		searchMusicLoading(true);   //用来显示状态的
		musicPage = Page;
		var head = "search_result";
		var src1 = "http://kuang.xiami.com/app/nineteen/search/key/"+ encodeURIComponent($("#search_input").val()) +"/diandian/1/page/page/"+ musicPage +"?random="+new Date().getTime()+".js&callback=getXiamiData";
		var JSONP = document.createElement("script") ;
		JSONP.type = "text/javascript";
		JSONP.src = src1;
		setTimeout(function(){
			document.getElementsByTagName("head")[0].appendChild(JSONP);}, 0);
		JSONP.onload = JSONP.onreadystatechange = function(){
			if (!this.readyState || this.readyState === "loaded" || this.readyState === "complete") {
				JSONP.onload = JSONP.onreadystatechange = null;             
			}
		}
	}
	
	// search_input 按Enter搜索
	function search_input_onkeypress(event) {
		var keyCode = event.keyCode ? event.keyCode : event.which ? event.which
				: event.charCode;
		if (keyCode == 13) {
			if (($("#search_input").val() != $("#search_input").attr("title"))
					&& ($("#search_input").val() != '')) {
				searchMusicList(1);
			} else {
				$("#search_input").val($("#search_input").attr("title"));
			}
		}
	}

	function searchMusicLoading(show) {
		if(show == true) {
			document.getElementById('search_zt').innerHTML = '搜索状态：正在搜索中……';
		} else {
			document.getElementById('search_zt').innerHTML = '搜索音乐：';
			$("#self_set_pager_ui").html("");   //去除搜索音乐分页的功能
		}
	}
	
</script>


<div id="WER">

	<form name="search_form" onsubmit="return false;" action="#">
		<div class="panel_wrapper">
			<p id="search_zt">搜索音乐：</p>
			<input id="search_input" name="" type="text"
				title="按  Enter 搜索...(可输入 歌曲名、专辑名、艺人名)"  value=""
				onblur="if(!trim(this.value)) this.value = this.title;"
				onclick="if(this.value == this.title) this.value = '';"
				onkeypress="search_input_onkeypress(event);"
				onkeydown="search_bt_onclick();" />
			<div id="search_result"  align="center">
				<ul class="music_list" id="music_list"></ul>
				<div id="self_set_pager_ui"></div>
			</div>

            <span id="data-music-hidden"  data-music-hidden=""></span>
		</div>

	</form>
 
</div>